/**
* @description: 印章使用工单—— 待审批、审批拒绝、审批通过详情（省信通）
* @author: JiWei
* @date:
**/
<template>
  <view class="task-monitor-main">
    <nav-bar class="header" back title="任务详情" @goBack="goBack"/>
    <!-- banner -->
    <view class="top-banner">
      <view class="left-banner">
        <text class="left-banner-title">{{detailsMsg.ORIGINATOR_NAME}}发起的{{detailsMsg.NAME}}</text>
        <text class="left-banner-time">{{detailsMsg.CREATE_TIME}}</text>
      </view>
      <view :class="stateColor">{{state === '0' ? '待审批' : state === '1' ? '审批拒绝' : '审批通过' }}</view>
    </view>
    <!-- main   -->
    <main :class="{'mainHeight':state==='0'}">
      <plateTitle title="基本信息" :isRequired="false" class="plate-title" />
      <view class="main-top">
        <van-field v-model="detailsMsg.USE_DATE" label="用章日期" readonly error-message-align="right" />
        <van-field v-model="detailsMsg.USE_NUM" label="用印份数" readonly error-message-align="right" />
      </view>
      <view class="remark-info-container">
        <view>用章事由(文件名称)</view>
        <van-divider dashed />
        <div class="remark-wrap">
          <van-field error-message-align="right" readonly type="textarea" class="remark-text" v-model="detailsMsg.ORIGIN_INCIDENT" placeholder="这里是用章事由信息"/>
        </div>
      </view>
      <view class="remark-info-container">
        <view>备注</view>
        <van-divider dashed />
        <div class="remark-wrap">
          <van-field readonly error-message-align="right" type="textarea" class="remark-text" v-model="detailsMsg.REMARKS" placeholder="这里是备注信息"/>
        </div>
      </view>
      <view class="main-top">
        <van-field v-model="detailsMsg.ORIGINATOR_NAME" label="申请人" readonly error-message-align="right" />
        <van-field v-model="detailsMsg.TRUSTEE_NAME" label="经办人" readonly error-message-align="right" />
        <van-field v-model="detailsMsg.APPROVE_NAME" label="审批人" readonly error-message-align="right" />
      </view>
      <plateTitle title="审批进度" :isRequired="false" class="plate-title" />
      <view class="approval-info-container">
        <van-steps direction="vertical"
                   :active="approvalActive"
                   active-color="#417adc"
                   inactive-color="#417adc"
                   active-icon="circle"
                   inactive-icon="circle">
          <van-step v-for="(item,index) in setpList" :key="index">
            <p><span>{{ item.EXECUTION_PERSON_NAME }}</span><span>{{item.EXECUTION_PERSON_ROLE}}</span></p>
            <p style="color: #417adc">{{item.EXECUTION_PERSON_STATR}}</p>
            <p>{{ item.EXECUTION_TIME }}</p>
          </van-step>
        </van-steps>
      </view>
    </main>

    <!-- footer   -->
    <footer v-if="state === '0'">
      <van-button block native-type="submit" @click="goApproval">审批</van-button>
    </footer>
    <!-- 弹出审批页 -->
    <van-popup
        closeable
        :close-on-click-overlay="false"
        v-model="showApproval"
        position="bottom"
    >
      <toApprove @submitApproval="submitApproval" :isChangeRadio="true"></toApprove>
    </van-popup>
  </view>
</template>
<script>
import navBar from "../../../components/common/nav-bar";
import plateTitle from '../common/plateTitle.vue';
import toApprove from '../common/toApprove.vue';
import {mapGetters} from "vuex"
import {Dialog} from "vant";
export default {
  name: 'sealDetailsProvinice',
  components: { navBar,plateTitle,toApprove},
  props: {},
  data() {
    return {
		state:'',
	  detailsMsg:{},
	  setpList:[],
      showApproval: false, // 展示审批弹窗
      approvalActive: 0,
      approvalData: {},
	  id:'',
	  prevPage:'',
      approvalColor: () => {
        // if (this.approvalData.approvalState === "发起审批") return "#417ADC";
        if (this.approvalData.approvalState === "1") return "#41DC83"; // 通过
        if (this.approvalData.approvalState === "0") return "#FF4355"; // 审批中
        if (this.approvalData.approvalState === "-1") return "#FFAD0E";// 拒绝
      },
    };
  },
  computed: {
	   ...mapGetters(['userData']),
    stateColor() {
		if(this.state === '0') {
			return 'left-state-jj'
		}else if(this.state === '2') {
			return 'left-state-tg'
		}else {
			return 'left-state-dsp'
		}
    }
  },
  watch: {},
  onLoad(option) {
	  this.id = option.id;
	  this.prevPage= this.pagetype;
  	this.getProvincialSealDetailed()
  },
  mounted() {},
  methods: {
    // 返回
    goBack() {
      // uni.navigateTo({
      //   url: '/pages/operationApprove/sealApproval/sealApprovalProvince'
      // })
	  uni.navigateBack()
    },
	getProvincialSealDetailed(){
		let params = {
			id:this.id
		}
		this.$api.getProvincialSealDetailed(params).then(res => {
		  this.detailsMsg = res.data;
		  this.state = this.detailsMsg.STATE
		  this.setpList = res.data.approList;
		  this.approvalActive = res.data.currNode
		})
	},
    // 待审批-按钮
    goApproval() {
      this.showApproval = true;
    },
    //  去审批
    submitApproval(msg) {
		 this.showApproval = false;
		this.examineSeal({radio:msg.radio,determineResult:msg.determineResult})
	},
	examineSeal ({radio, determineResult}) { // 审批组件点击确认事件

	  let params = {
	    "userId":  this.userData.USERID, // 是	string	登录用户ID
	    "username":  this.userData.SUERNAME, // 是	string	登录用户名称
		"roleId": this.userData.roleId, // 是	string	登录用户权限ID
	    "state": radio,
	    "explain": determineResult,
	    "ids": [this.id],
		"modeType" : "YZSP",
	  }

	  this.$api.examineSeal(params).then(res => {
	    if (res.code === 0) {
	      Dialog.alert({
	        message: "审批成功"
	      }).then(() => {
	        this.showApproval = false;
	        // this.onRefresh();
		  let pages = getCurrentPages()
		  let prevPage = pages[pages.length - 2];//上级页面
		  prevPage.isRefresh=true
			this.goBack()
	      });
	    }
	  })
	},
  }
};
</script>
<style scoped lang="scss">
.task-monitor-main {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #F2F6FA;
  .top-banner {
	  flex-shrink: 0;
    width: px2vw(1080);
    height: px2vh(190);
    background: #fff;
    margin-bottom: px2vw(40);
    .left-banner {
      width: px2vw(600);
      margin-top: px2vh(47);
      height: px2vh(98);
      float: left;
      margin-left: px2vh(50);
      .left-banner-title {
        display: block;
        font-size: px2vw(42);
        color: #417ADC;
      }
      .left-banner-time {
        font-size: px2vw(36);
        color: #666;
      }

    }
    .left-state-dsp,
    .left-state-tg,
    .left-state-jj {
      width: px2vw(220);
      height: px2vh(80);
      margin-right: px2vh(30);
      margin-top: px2vh(55);
      float: right;
      font-size: px2vw(42);
      font-weight: 700;
      border-radius: px2vw(40);
      text-align: center;
      line-height: px2vh(80);
    }
    .left-state-tg {
      color: #3CDA68;
      background: rgba(62, 218, 104, 0.1);
    }
    .left-state-dsp {
      color: #FF7070;
      background: rgba(255, 112, 112, 0.1);
    }
    .left-state-jj {
      color: #FFAD0E;
      background: rgba(255, 180, 0, 0.1);
    }
  }

  main {
    width: calc(100% - #{px2vw(60)});
    margin:auto;
	flex: 1;
    // height: calc(100vh - #{px2vh(430)});
    overflow-x: auto;
	overflow-y: scroll;
    .plate-title {
      margin-bottom: px2vh(30);
    }
    .main-top {
      overflow: hidden;
      border-radius: px2vh(20);
      margin-bottom: px2vh(30);
    }
    .remark-info-container {
      padding: px2vh(70) px2vw(50);
      font-size: px2vw(42);
      color: #666666;
      border-radius: px2vw(20);
      overflow: hidden;
      background-color: #FFFFFF;
      margin-top: px2vh(40);
      margin-bottom: px2vh(40);

      .remark-wrap {
        border-radius: px2vw(20);

        .remark-text {
          height: px2vh(150);
        }
      }
    }
    .approval-info-container {
      border-radius: $border-radius-base;
      overflow: hidden;
      background-color: #FFFFFF;

      /deep/ .van-cell__title {
        color: #666;
      }

      /deep/ .van-cell__value {
        color: #333;
      }
    }
    .approval-info-container {
      .van-steps {
        .van-step.van-step--process {
          /deep/.van-icon::before {
            border-radius: 50%;
            color: #417adc;
            background-color: #417adc;
          }
        }
        .van-step {
          /deep/.van-icon::before {
            border: 2px;
            border-radius: 50%;
            color: #417adc;
            background-color: #fff;
          }
          p {
            margin-bottom: 4px;
            color: #ababab;
          }
          p:nth-child(1) {
            display: flex;
            justify-content: space-between;
            //width: px2vw(300);
            color: #333;
          }
          .opinion {
            display: flex;
            span:nth-child(1) {
              min-width: 70px;
            }
          }
        }
      }
    }
  }
  .mainHeight {
    height: calc(100vh - #{px2vh(590)});
  }
  footer {
    height: px2vh(155);
    background: #f2f6fa;
    padding-top: px2vh(45);
	flex-shrink: 0;
    /deep/ .van-button {
      width: calc(100% - #{px2vw(60)});
      margin-left: px2vh(30);
      height: px2vh(120);
      color: #fff;
      background-color: #417ADC;
      border: 1px solid #417ADC;
      border-radius: px2vh(60);
    }
  }
}
</style>
